<template>
  <!-- 新增企业 表单 -->
  <a-modal
    v-model:open="visible"
    :title="isEdit ? '编辑企业' : '新增企业'"
    class="addStation"
    destroyOnClose
    :width="'1000px'"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="企业名称" name="companyId">
        <!-- 可搜索的企业 -->
        <a-select
          v-model:value="form.companyId"
          clearable
          show-search
          optionFilterProp="label"
          placeholder="请选择企业"
          style="width: 350px"
        >
          <a-select-option
            v-for="item in companyDrList"
            :key="item.id"
            :value="item.id"
            :label="item.projectName"
            >{{ item.projectName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="户号名称" name="name">
        <a-input
          v-model:value="form.name"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="用电户号" name="num">
        <a-input
          v-model:value="form.num"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="电力用户代码" name="code">
        <a-input
          v-model:value="form.code"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="虚拟电厂名称" name="virtualPlantName">
        <a-input
          v-model:value="form.virtualPlantName"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="虚拟电厂编号" name="virtualPlantNum">
        <a-input
          v-model:value="form.virtualPlantNum"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="企业地址：" name="cityId">
        <div class="areaSelectContent">
          <a-select
            ref="select"
            v-model:value="form.provId"
            class="areaSelect"
            placeholder="省份"
            show-search
            optionFilterProp="label"
            @change="changeProv"
            style="width: 268px"
          >
            <a-select-option
              v-for="item in provList"
              :key="item.provId"
              :value="item.provId"
              :label="item.provName"
            >
              {{ item.provName }}
            </a-select-option>
          </a-select>
          <a-form-item-rest>
            <a-select
              ref="select"
              v-model:value="form.cityId"
              class="areaSelect"
              placeholder="城市"
              @change="changeCity"
              style="width: 268px"
              :disabled="!form.provId"
            >
              <a-select-option
                v-for="item in cityList"
                :key="item.cityId"
                :value="item.cityId"
                :label="item.cityName"
              >
                {{ item.cityName }}
              </a-select-option>
            </a-select>
            <a-select
              ref="select"
              v-model:value="form.countyId"
              class="areaSelect"
              placeholder="区"
              style="width: 268px"
              :disabled="!form.cityId"
            >
              <a-select-option
                v-for="item in countyList"
                :key="item.countyId"
                :value="item.countyId"
                :label="item.countyName"
              >
                {{ item.countyName }}
              </a-select-option>
            </a-select>
          </a-form-item-rest>
        </div>
      </a-form-item>
      <a-form-item label="详细地址" name="address">
        <a-textarea
          v-model:value="form.address"
          class="formInput"
          placeholder="请输入"
          style="width: 815px"
          :autoSize="true"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>

const $api = inject("$api")
const props = defineProps({
  addCustomerVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
})
const loading = ref(false)
const visible = ref(props.addCustomerVisible)
const emits = defineEmits(["update:addCustomerVisible", "getCustomerList"])

const labelCol = { style: { width: "100px" } }
const formRef = ref(null)
const form = ref({
  companyId: null, //企业id
  name: null, //户号名称
  num: null, //用电户号
  code: null, //电力用户代码
  virtualPlantName: null, //虚拟电厂名称
  virtualPlantNum: null, //虚拟电厂编号
  provId: null, //省份id
  cityId: null, //城市id
  countyId: null, //区县id
  address: null, //详细地址
})
const rules = ref({
  companyId: [
    {
      required: true,
      message: "请选择企业",
      trigger: "change",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  num: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  cityId: [
    {
      required: true,
      message: "请输入",
      trigger: "change",
    },
  ],
})
//获取企业列表
const companyDrList = ref([])
const getBaseCompanyTree = async () => {
  console.log("props.isEdit", props.isEdit)
  const res = await $api.companyList()
  companyDrList.value = res.data
}
const cancel = () => {
  emits("update:addCustomerVisible", false)
  form.value = {
    companyId: null,
    name: null,
    num: null,
    code: null,
    virtualPlantName: null,
    virtualPlantNum: null,
    provId: null,
    cityId: null,
    countyId: null,
    address: null,
  }
  formRef.value.clearValidate()
}
const provList = ref([])
const cityList = ref([])
const countyList = ref([])
const getBaseProvinceTree = async () => {
  const res = await $api.baseProvinceTree()
  provList.value = res.data
}
const changeProv = async (id) => {
  form.value.cityId = null
  form.value.countyId = null
  cityList.value = []
  countyList.value = []
  const res = await $api.baseCityTree(id)
  cityList.value = res?.data
}
const changeCity = async (id) => {
  form.value.countyId = null
  countyList.value = []
  const res = await $api.baseCountyTree(id)
  countyList.value = res?.data
}
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        ...form.value,
      }
      if (props.isEdit) {
        // 编辑带上id
        params.id = props.rowData.id
      }
      loading.value = true
      /* const res = await $api.companyAdd(params, props.isEdit ? "put" : "post") */
      const res = props.isEdit
        ? await $api.editElecAccManage(params)
        : await $api.addElecAccManage(params)
      loading.value = false
      if (res.code === 0) {
        message.success(props.isEdit ? "编辑成功" : "新增成功")
        cancel()
        emits("getCustomerList")
      }
    })
    .catch((error) => {
      console.log("error", error)
    })
}

onMounted(async () => {
  getBaseProvinceTree()
  getBaseCompanyTree()
})
watch(
  () => props.addCustomerVisible,
  (val) => {
    visible.value = val
    if (val) {
      getBaseProvinceTree()
      getBaseCompanyTree()
    }
  }
)
watch(
  () => [props.isEdit, props.rowData],
  async ([val, val2]) => {
    if (val && val2) {
      await changeProv(val2.provId)
      await changeCity(val2.cityId)
      form.value = {
        ...props.rowData,
      }
    }
  }
)
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 350px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelect {
  display: inline-block;
  width: 113px;
  margin-right: 5px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
